<template>
  <el-drawer v-model="visableDrawer" title="添加路线" size="40%">
    <el-form ref="formRef" :model="formModel" :rules="rules" abel-width="100px">
      <el-form-item label="路线名称" prop="routeName">
        <el-input placeholder="请输入路线名称" v-model="formModel.routeName"></el-input>
      </el-form-item>
      <el-form-item label="起始站" prop="startPointId">
        <el-select v-model="formModel.startPointId" placeholder="请选择起始站" style="width: 240px">
          <el-option
            v-for="item in PointList"
            :key="item.id"
            :label="item.pointName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="终点站" prop="startPointId">
        <el-select v-model="formModel.endPointId" placeholder="请选择终点站" style="width: 240px">
          <el-option
            v-for="item in PointList"
            :key="item.id"
            :label="item.pointName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="站点" prop="points">
        <!-- <template> -->
        <el-select
          v-model="formModel.points"
          placeholder="请选择站点"
          multiple
          style="width: 240px"
        >
          <el-option
            v-for="item in PointList"
            :key="item.id"
            :label="item.pointName"
            :value="item.id"
          />
        </el-select>
        <!-- </template> -->
      </el-form-item>

      <el-form-item label="时间" prop="times">
        <!-- <template> -->
        <el-select v-model="formModel.times" placeholder="请选择时间" multiple style="width: 240px">
          <el-option
            v-for="item in TimesList"
            :key="item.id"
            :label="item.pointName"
            :value="item.id"
          />
        </el-select>
        <!-- </template> -->
      </el-form-item>

      <el-form-item>
        <el-button @click="onSubmit()" type="primary">提交</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script setup>
import { ref } from 'vue'
const visableDrawer = ref(false)
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { AddRouteService, EditRouteService, GetRouteDetailService } from '@/api/route'
import { GetPointService } from '@/api/point'
import { ElMessage } from 'element-plus'
// 默认数据
const defaultForm = {
  routeName: '',
  id: '',
  startPointId: '',
  endPointId: '',
  points: '',
  times: ''
}

const PointList = ref([])

const TimesList = ref([
  { id: 10, pointName: '10分钟' },
  { id: 15, pointName: '15分钟' },
  { id: 20, pointName: '20分钟' },
  { id: 25, pointName: '25分钟' },
  { id: 30, pointName: '30分钟' }
])

const getPointList = async () => {
  const res = await GetPointService()
  if (res.data.meta.status !== 200) {
    ElMessage.error(res.data.meta.msg)
    return
  }
  PointList.value = res.data.data
}

getPointList()

//表单校验规则
const rules = {
  routeName: [
    { required: true, message: '请输入路线名称', trigger: 'blur' },
    {
      pattern: /^\S{1,10}$/,
      message: '路线名称名必须是1-10位的非空字符',
      trigger: 'blur'
    }
  ],
  startPointId: [{ required: true, message: '请输入选择起始站', trigger: 'blur' }],
  endPointId: [{ required: true, message: '请输入选择终点站', trigger: 'blur' }],
  times: [{ required: true, message: '请输入选择时间', trigger: 'blur' }],
  points: [{ required: true, message: '请输入选择站点', trigger: 'blur' }]
}

// 准备数据
const formModel = ref({ ...defaultForm })

const open = async (row) => {
  visableDrawer.value = true
  if (row.id) {
    //需要基于row.id发送请求，获取编辑对应的详情数据，进行回显
    const res = await GetRouteDetailService(row.id)
    formModel.value = res.data.data
    formModel.value.points = formModel.value.points.split(',')
    // 移除第一个元素
    formModel.value.points.shift()

    // 移除最后一个元素
    formModel.value.points.pop()

    formModel.value.times = formModel.value.times.split(',')
  } else {
    formModel.value = { ...defaultForm } //基于默认的数据，重置form数据
  }
  console.log(row)
}
const formRef = ref()

const onSubmit = async () => {
  await formRef.value.validate()
  formModel.value.points = formModel.value.points + ''
  formModel.value.points =
    formModel.value.startPointId + ',' + formModel.value.points + ',' + formModel.value.endPointId
  formModel.value.times = formModel.value.times + ''
  console.log(formModel.value)
  const isEdit = formModel.value.id
  if (isEdit) {
    await EditRouteService(formModel.value)
    ElMessage.success('修改成功')
    visableDrawer.value = false
    formModel.value.points = ''
    formModel.value.times = ''
    emit('success', 'edit')
  } else {
    delete formModel.value.id
    await AddRouteService(formModel.value)
    ElMessage.success('添加成功')
    visableDrawer.value = false
    formModel.value.points = ''
    formModel.value.times = ''
    //通知到父组件，添加成功了
    emit('success', 'add')
  }
}

const emit = defineEmits(['success'])

defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.avatar-uploader {
  :deep() {
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: routeer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }
    .el-upload:hover {
      border-color: var(--el-color-primary);
    }
    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }
}

.editor {
  width: 100%;
  :deep(.ql-editor) {
    min-height: 200px;
  }
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
